<template>
  <div class="hello">
    <div class='reg-hd-line'>
        <div class='g-container reg-hd'>
            <div>logo</div>
            <div>
                <router-link class='f-mrt10' to="/register">
                    <el-button type="danger">注册</el-button>
                </router-link>
                <el-button type="success">立即咨询</el-button>
            </div>
        </div>
    </div>
    <div>
        <div class='g-container login-mn'>
            <img class='lt-img' src="../assets/login_left.png" alt="">
            <div class='f-fr mn-rt'>
                <div class='login-form f-fr'>
                    <h1>账号登陆</h1>
                    <el-input class='reg-mbt15' placeholder="手机号" v-model="phone" clearable></el-input>
                    <el-input placeholder="密码" v-model="password" clearable></el-input>
                    <el-button @click="login" class='f-w-full login-btn' type="danger">登陆</el-button>
                    <div class='f-fs2'>
                        <div class='f-fl'>
                            <span class='s-c666'>没有账户?</span>
                            <router-link class='s-c-blue' to="/register">立即注册</router-link>
                        </div>
                        <router-link class='f-fr s-c999' to="/register">忘记密码</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Login',
  data () {
    return {
      phone: '13368086502',
      password: ''
    }
  },
  methods: {
    login () {
      const params = new URLSearchParams()
      params.append('phone', this.phone)
      params.append('password', this.password)
      axios.post('http://localhost:3000/api/login', params, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((res) => {
        console.log(res)
        if (res.data.returnCode === 200) {
          this.$router.push('/userCenter')
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.reg-hd{
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.reg-hd-line{
    border-bottom: 1px solid #ddd;
}
.login-mn{
    padding: 45px 0 100px 0;
}
.login-mn .lt-img{
    width: 580px;
    height: 390px;
}
.mn-rt{
    width: 480px;
    height: 390px;
    border-left: 1px solid #ddd;
}
.login-form{
    width: 350px;
}
.login-form>h1{
    font-size: 20px;
    color: #666;
    padding-bottom: 20px;
}
.login-btn{
    margin: 45px 0 10px 0;
}
.reg-mbt15{
    margin-bottom: 15px;
}
</style>
